/**
 * Author : Fengyuan(Franklin) Zhang
 * Date : 2019/3/12
 * Description : Component for task information
 */

var React = require('react');
var Axios = require('axios');


var TaskInfo = React.createClass({
    getInitialState : function(){
        return {
            loading : true,
            error : null,
            taskinfo : {},
            polling : setInterval(function(){
                this.refresh();
            }.bind(this), 2000)
        }
    },

    componentDidMount : function () {
        
    },

    refresh : function() {
        Axios.get(this.props['source']).then(
            data => {
                if(data.data.result == 'suc'){
                    if(data.data.data.t_status == 'Finished'){
                        clearInterval(this.state.polling);
                    }
                    this.setState({loading : false, taskinfo : data.data.data});
                }
                else{
                    this.setState({loading : false, error : data.data.message});
                }
            },
            err => {
                this.setState({loading : false, error : err.message});
            }
        )
    },

    DownloadFile : function(url){
        window.open(url);
    },

    render : function () {
        if(this.state.loading){
            return(<div>Loading...</div>);
        }
        if(this.state.error){
            return(<div>Error : { this.state.error }</div>);
        }
        var date = (new Date(this.state.taskinfo.t_datetime)).toLocaleString();
        var status = (<span className="label label-warning" >Unfinished</span>);
        var process = (
        <div className="progress progress-striped active progress-sm">
            <div id="bar_pro" style={{ width: "100%" }} aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" role="progressbar" className="progress-bar progress-bar-success">
                <span className="sr-only">100%</span>
            </div>
        </div>);
        if(this.state.taskinfo.t_status == 'Finished'){
            status = (<span className="label label-success" >Finished</span>);
            process = '';
        }
        else if(this.state.taskinfo.t_status == 'Error'){
            status = (<span className="label label-danger" >Error</span>);
            process = '';
        }
        //Input data
        var inputData = this.state.taskinfo.t_inputs.map(function (input, index) {
            var downloadBtn = null;
            if (input.Url != null && input.Url != ''){
                var downloadBtn = (<button className="btn btn-default btn-xs" onClick={(e) => { this.DownloadFile(input.Url) }} ><i className="fa fa-download"></i> Download </button>);
            }
            return (
                <tr key={index}>
                    <td>{index}</td>
                    <td title={input.StateName} >{input.StateName}</td>
                    <td>{input.Event}</td>
                    <td title={input.Tag} >{input.Tag}</td>
                    <td>
                        {downloadBtn} &nbsp;
                    </td>
                </tr>);
        }, this);
        inputData = (
            <table className="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>StateName</th>
                        <th>EventName</th>
                        <th>Tag</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    {inputData}
                </tbody>
            </table>
        )
        
        //Output data
        var outputData = this.state.taskinfo.t_outputs.map(function (output, index) {
            var downloadBtn = null;
            if (output.Url != null && output.Url != '' && output.Url != 'null'){
                downloadBtn = (<button className="btn btn-default btn-xs" onClick={(e) => { this.DownloadFile(output.Url) }} ><i className="fa fa-download"></i> Download </button>);
            }
            else{
                downloadBtn = (<span className="label label-warning">No Data</span>)
            }
            return (
                <tr key={index}>
                    <td>{index}</td>
                    <td title={output.StateName} >{output.StateName}</td>
                    <td>{output.Event}</td>
                    <td title={output.Tag} >{output.Tag}</td>
                    <td>
                        {downloadBtn} &nbsp;
                    </td>
                </tr>);
        }, this);
        outputData = (
            <table className="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>StateName</th>
                        <th>EventName</th>
                        <th>Tag</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    {outputData}
                </tbody>
            </table>
        )
        return (
        <div className="panel panel-info">
            <div className="panel-heading">
                Task Info
                <span className="tools pull-right">
                    <a href="javascript:;" className="fa fa-chevron-down"> </a>
                </span>
            </div>
            <div className="panel-body">
                <p><strong>Start Time&nbsp;:&nbsp;</strong>{date}</p>
                <p><strong>Status&nbsp;:&nbsp;</strong>{status}</p>
                <p><strong>Input Data&nbsp;:&nbsp;</strong>{inputData}</p>
                <p><strong>Output Data&nbsp;:&nbsp;</strong>{outputData}</p>
                <p>{process}</p>
            </div>
        </div>
        );
    }
});

module.exports = TaskInfo;